<template>
  <div class="index">
    <div class="name" :style="{color: textColor}">{{name}}</div>
    <div class="bar" :style="{backgroundColor: barColor, height: barHeight + 'px'}">
      <div
        class="active-bar"
        :style="{backgroundColor: activeBarColor, width: (score * 10) + '%'}"
      ></div>
    </div>
    <div class="score" :style="{color: scoreColor}">{{score}}分</div>
  </div>
</template>

<script>
export default {
  name: 'CompanyIndex',
  props: {
    name: {
      type: String,
      default: ''
    },
    score: {
      type: Number,
      default: 8.6
    },
    barHeight: {
      type: Number,
      default: 12
    },
    barColor: {
      type: String,
      default: '#ddd'
    },
    activeBarColor: {
      type: String,
      default: '#aaa'
    },
    textColor: {
      type: String,
      default: '#666'
    },
    scoreColor: {
      type: String,
      default: '#f00'
    }
  },
  data() {
    return {
      width: 0
    };
  },
  created() {

  }
};
</script>

<style lang="less" scoped>
  .index {
    display: flex;
    margin-bottom: 10px;
    .name {
      flex: 0 0 70px;
    }
    .bar {
      flex: 1;
      margin-top: 2px;
      height: 12px;
      .active-bar {
        height: 100%;
      }
    }
    .score {
      flex: 0 0 50px;
      margin-left: 10px;
    }
  }
</style>
